import AppChartView from "./ChartView";
import React, { Fragment } from "react";
import AppDataView from "./DataView";
import { inject, observer } from "mobx-react";
import { withRouter } from 'react-router-dom';
import Loading from "../../../common/loading";
import If, { Then, Else } from "../../../common/if";
import { WhiteSpace, WingBlank, SegmentedControl } from "weaver-mobile";
import "./index.less";

@inject('appAnalysisStore')
@withRouter
@observer
export default class AppAnalysis extends React.Component {
  constructor(props) {
    super();

    this.store = props.appAnalysisStore;
    this.state = {
      appid: props.match.params.id
    };
  }

  componentDidMount() {
    const { appid } = this.state;

    this.store.init(appid);
  }

  componentWillUnmount() {
    this.store.initState();
  }

  onSegmentChange = (e) => {
    const selectedIndex = e.nativeEvent.selectedSegmentIndex;

    this.store.onSelectedIndexChange(selectedIndex);
  }

  render() {
    const { dataStore, chartStore, selectedIndex } = this.store;
    const { table, pagination, noForm, isInit: isDataInit } = dataStore;
    const { widgets, noChart, boardInfo, isInit: isChartInit } = chartStore;

    return (
      <Fragment>
        <WhiteSpace size='lg' />
        <WingBlank>
          <SegmentedControl
            values={['数据', '图表']}
            selectedIndex={selectedIndex}
            onChange={this.onSegmentChange}
          />
        </WingBlank>
        <WhiteSpace size='lg' />
        <Loading loading={selectedIndex === 0 && !isDataInit} content='正在加载...' />
        <If condition={selectedIndex === 0}>
          <Then><AppDataView {...table} pagination={pagination} noForm={noForm} /></Then>
          <Else>
            <AppChartView
              widgets={widgets}
              noChart={noChart}
              theme={boardInfo.theme}
              loading={selectedIndex === 1 && !isChartInit}
            />
          </Else>
        </If>
      </Fragment>
    );
  }
}